﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>表单</title>
    <link rel="stylesheet" type="text/css" href="./icons/font-icons.min.css">
    <link rel="stylesheet" type="text/css" href="./icons/icons.css">
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="./layui/css/customer.css">
    <script type="text/javascript" src="./js/sortjs/Sortable.min.js"></script>
    <!--- 引入代码. -->
    <script src="../Scripts/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./layui/layui.js"></script>
    <script src="../Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../Scripts/config.js" type="text/javascript"></script>
    <script src="../Comm/Gener.js" type="text/javascript"></script>
    <script type="text/javascript" src="./js/vue/vue.js"></script>
    <!--    <script type="text/javascript" src="Flows.js"></script>-->
    <style>
        .flow {
            width: 100%;
        }
        
        .flow .row {
            display: flex;
            justify-content: flex-start;
            flex: 0.2;
            height: 40px;
            line-height: 40px;
            background-color: #FAFAFA;
        }
        /*.flow .row .item {*/
        /*    box-sizing: border-box;*/
        /*    flex-shrink: 0;*/
        /*    text-align: center;*/
        /*    width: 20%;*/
        /*    border: 1px solid #eee;*/
        /*    font-weight: 600;*/
        /*}*/
        
        .flow .row .item {
            box-sizing: border-box;
            flex-shrink: 0;
            text-align: center;
            border-right: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }
        
        .item-name {
            width: 40%;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            padding-left: 30px;
        }
        
        .item-other {
            width: 12%;
        }
        
        .item-index {
            background-color: #FAFAFA;
            padding-right: 40px;
            color: #999999
        }
        
        .flow .row .folder-item {
            box-sizing: border-box;
            /*width: 76%;*/
            padding-left: 20px;
            cursor: pointer;
        }
        
        .wrapper .row {
            background-color: #fff;
        }
        
        #s-main {
            transition: all ease .4s;
            margin-top: 40px;
        }
        
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }
        [v-cloak]{
            display: none !important;
        }
    </style>
</head>

<body>
    <div class="flow" id="flow" v-cloak>
        <div class="row fixed">
            <div class="item item-other" @click="expandAll = !expandAll">
                <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">{{expandAll ? '折叠所有' : '展开所有'}}</button>
            </div>
            <div class="item item-name">表单名称</div>
            <div class="item item-other">表单类型</div>
            <div class="item item-other">应用模式</div>
            <div class="item item-other">存储表</div>
            <!--<div class="item item-other">数据源</div>-->
            <div class="item item-other">操作</div>
        </div>
        <div ref="sort-main" id="s-main">

            <div class="wrapper" v-for="(item,index) in flowNodes" :key="index" :data-id="item.No" :data-pid="item.ParentNo">
                <div class="row" @click="item.open = !item.open">
                    <div class="item item-other" style="text-align: center">
                        <i v-if="item.children.length > 0" class="layui-icon" :class="item.open ? 'layui-icon-up':'layui-icon-right'"></i>
                        <i v-else class="layui-icon layui-icon-subtraction"></i>
                    </div>
                    <div class="item item-name folder-item item-top-dp" style="text-align: left; background-color:azure;" :data-no="item.No" :data-name="item.Name" :data-idx="index">
                        <i class="icon-folder" style="margin-right: 8px"></i>
                        <span>{{item.Name}}</span>

                    </div>
                    <div class="item item-other">
                        <button @click.stop="NewFlow(item.No)" :data-no="item.No" :data-name="item.Name" :data-idx="index" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">
                            新建表单
                        </button>
                    </div>
                    <div class="item item-other"></div>
                    <div class="item item-other"></div>
                    <div class="item item-other ">
                        <button @click.stop :data-no="item.No" :data-name="item.Name" :data-idx="index" class="layui-btn layui-btn-primary layui-border-black layui-btn-sm t-btn">
                            <i class="layui-icon layui-icon-down layui-font-12"></i> 目录
                        </button>
                    </div>
                </div>
                <div v-show="item.open" :data-id="item.No" ref="child-row">
                    <div class="row" v-for="(flow,idx) in item.children" :key="idx" :data-pid="item.No" :data-id="flow.No">
                        <div class="item item-other item-index" style="text-align: right;">{{idx + 1}}</div>

                        <div class="item item-name item-name-dp" @click.stop="Designer(flow.No,flow.Name)" style="text-align: left" :data-no="flow.No" :data-name="flow.Name" :data-pidx="index" :data-idx="idx">
                            <!-- 这里是子菜单的icon -->
                            <!-- 这里是子菜单的icon -->
                            <!-- 这里是子菜单的icon -->
                            <i :class="flow.Icon" style="margin-right: 8px"></i>
                            <!--<i class="icon-heart" style="margin-right: 8px"></i>-->

                            <span>{{flow.No}}.{{flow.Name}}</span>
                        </div>
                        <div class="item item-other">{{flow.FrmType}}</div>
                        <div class="item item-other">{{flow.EntityType}}</div>
                        <div class="item item-other">{{flow.PTable}}</div>
                        <!--<div class="item item-other">{{flow.DBSrc}}</div>-->
                        <div class="item item-other">
                            <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs c-btn" :data-name="flow.Name" :data-no="flow.No" :data-pidx="index" :data-idx="idx">  <i class="layui-icon layui-icon-down layui-font-12"></i> 表单</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="Frms.js"></script>

</body>

</html>